<template>
	<div>
		<Header />
		<div>
			<div class="mapNav">
			    <div class="indexContainer">
			        <el-breadcrumb separator-class="el-icon-arrow-right">
			            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			            <el-breadcrumb-item :to="{ path: '/demandCollect' }">需求征集</el-breadcrumb-item>
						<el-breadcrumb-item>需求详情</el-breadcrumb-item>
			        </el-breadcrumb>
			    </div>
			</div>
			
			<!-- <div class="indexContainer mobileFontSize12"
				style="display: flex;align-items: center;font-size: 16px;color: #999;padding: 10px 0;">
				<span>首页</span>
				<span style="padding: 0 5px;">></span>
				<span>学习园地</span>
				<span style="padding: 0 5px;">></span>
				<span>需求详情</span>
			</div> -->

			<div class="indexContainer">
				<div style="padding: 50px 0;flex-direction: column;">
					<el-descriptions class="margin-top" title="" :column="2" border>
						<el-descriptions-item>
							<template slot="label">
								需求标题
							</template>
							{{info.title}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								姓名
							</template>
							{{info.userName}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								职务
							</template>
							{{info.dept}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								联系电话
							</template>
							{{info.phone}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								需求描述
							</template>
							{{info.description}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								产品形式
							</template>
							{{info.productForm}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								所属业务类别
							</template>
							{{info.categoryName}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								需求发布时间
							</template>
								{{updateTimeChange(info.createTime)}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								需求有效期
							</template>
								{{updateTimeChange(info.effectiveTime)}}
						</el-descriptions-item>
					</el-descriptions>
				</div>
			</div>
		</div>

		<Footer />
		<contributeDialog ref="contributeDialog" @reloadData="getDetail()"></contributeDialog>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import contributeDialog from "@/view/personalCenter/myPlanPromotion/dialogContribute"; //方案投稿
	import {
		getDemandListDetail
	} from "@/request/api/demand";
	export default {
		components: {
			Header,
			Footer,
			contributeDialog
		},
		data() {
			return {
				info: {},
				contributeList: [] ,//投稿人
				isApply:false,
				userInfo:{}
			}
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
			  this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
			  // console.log('this.userInfo',this.userInfo)
			}
			this.getDetail()
		},
		mounted() {
			//console.log('mounted')
		},
		methods: {
			getDetail() {
				getDemandListDetail({id:this.$route.query.id}).then((res) => {
					// console.log('res',res)
					if (res.data.code == 1) {
						this.info = res.data.data
						// document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.result.keywordes)
						// document.querySelector('meta[name="description"]').setAttribute('content', res.data.result.settleMatter)
						// document.title = res.data.result.headline

					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 格式化时间
			updateTimeChange(val){
				return this.$moment(val).format('YYYY-MM-DD')
			},
			// 投稿人
			getContributerList() {
				contributerList({
					schemeId: this.$route.query.id
				}).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						let list = res.data.result.qita
						this.contributeList = list
					} else {}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 我要投稿
			apply() {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$refs.contributeDialog.open('add', {
					cateId: this.info.id
				})
			},
			apply2(){
				this.$message({
					message: '未开始或已过期',
					type: "warning",
				});
			},
			// 点击附件
			handleFile(index) {
				let accessoryUrl = this.info.accessoryDtos[index].accessoryUrl
				window.open(accessoryUrl, '_blank')
			}
		}
	}
</script>
<style lang="less" scoped>
	.form-label {
		text-align: right;
	}

	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 10px !important;
		}

		.mobileMargin {
			margin: 10px !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}
	.mapNav{
	   margin:20px 0;
	}
</style>